<template>
    <view class="page-wrapper">
        <view class="step-box" v-show="activeStep == 0">
            <view class="bold-text text-wrapper">
                {{ $t('pages.addDevice.wifiLink.step1_title') }}
            </view>
            <view class="desc-text text-wrapper">
                {{ $t('pages.addDevice.wifiLink.step1_desc') }}
            </view>
            <image src="/static/images/help/wifi_step_1.png" mode="aspectFit" class="image" />
        </view>
        <view class="step-box" v-show="activeStep == 1">
            <view class="bold-text text-wrapper">
                {{ $t('pages.addDevice.wifiLink.step2_title') }}
            </view>
            <view class="desc-text text-wrapper">
                {{ $t('pages.addDevice.wifiLink.step2_desc') }}
            </view>
            <image src="/static/images/help/wifi_step_2.png" mode="aspectFit" class="image" />
        </view>
        <view class="bottom-box">
            <up-button :text="$t('common.next')" @click="changeActive" size="normal" type="primary" style="width: 620rpx;" shape="circle"></up-button>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const activeStep = ref(0);

const changeActive = () => {
    if (activeStep.value == 0) {
        activeStep.value = 1
    } else {
        uni.redirectTo({
            url: '/pages/configDevice/addwifi'
        })
    }
}
</script>

<style lang="scss" scoped>
$bottom-height: 100rpx;

.page-wrapper {
    padding-bottom: $bottom-height;
}

.bottom-box {
    bottom: 0rpx;
    left: 0rpx;
    right: 0rpx;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: $bottom-height;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.text-wrapper{
    padding: 0 40rpx;
}

.step-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 30rpx;
    text-align: center;
    margin-top: 70rpx;

    .image {
        width: 240rpx;
        height: 240rpx;
    }
}

.desc-text{
    color: #4B5563;
    font-size: 30rpx;
}
.bold-text{
    font-size: 40rpx;
    color: #111827;
}
</style>